<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="帮我买"></myHead>
    <div class="want">
      <textarea name="" cols="30" rows="10" placeholder="输入想买的商品，如：暖宝宝1个" v-model="textNum"> </textarea>
      <div :class="textNum.length>=200?'textNum textNumed':'textNum'">{{textNum.length}}/200</div>
      <div class="wantBlock">
          <p v-for="x in wantList">{{x}}</p>
      </div>
    </div>
    <div class="xuanze">
        <div class="xz">
          <img src="../../../static/img/mai111.png" alt="">
          <p>指定哪个店铺购买</p>
          <img src="../../../static/img/youjiantou003.png" alt="">
        </div>
        <div class="xz">
          <img src="../../../static/img/shou111.png" alt="">
          <p>完善收货人信息</p>
          <img src="../../../static/img/youjiantou003.png" alt="">
        </div>
    </div>
    <div class="yugu">
      <p>商品价格: <span>此费用与配送员结算</span></p>
      <p>预估商品费</p>
      <img src="../../../static/img/youjiantou003.png" alt="">
    </div>
    <div class="xiaofei">
        <div class="xftop">
          <p>打赏:</p>
          <div class="numbtn">
            <p>－</p>
            <p>0元</p>
            <p>+</p>
          </div>
        </div>
      <div class="xfbot">
        <p>优惠券:</p>
        <p>无可用优惠券</p>
        <img src="../../../static/img/youjiantou003.png" alt="">
      </div>
    </div>
    <div class="fuwu">
      <img :src="select[2]?select[1]:select[0]" alt="">
      <p>已阅读并同意&nbsp;<span>《帮买服务协议》</span></p>
    </div>

    <footer>
      <div class="footleft">
          <p>跑腿运费 <span>0.0</span>元</p>
        <p>此费用不含商品费用</p>
      </div>
      <div class="buy">立即下单</div>
    </footer>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "helpBuy",
    components: {
      myHead
    },
    data() {
      return {
        textNum:'',
        wantList:['纸巾','暖宝宝','电池','插座','扑克牌','方便面','快乐肥宅水','冰淇淋'],
        select:['../../../static/img/queding111.png','../../../static/img/xuanzhong111.png',true]
      }
    },
    watch:{
      textNum(){
        if (this.textNum.length >= 200) {
          this.textNum = this.textNum.substring(0,200)
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    background-color: #F7F7F7;
    box-sizing: border-box;
    padding: .6rem .1rem .1rem;
  }

  .want {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem .15rem 0;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }

  textarea {
    width: 100%;
    height: 1rem;
    border: none;
    outline: none;
    resize: none;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .textNum {
    width: 100%;
    height: .2rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
    color: #999999;
    margin-bottom: .2rem;
  }
  .textNumed {
    color: #FF6F6F !important;
  }
  .wantBlock {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .wantBlock>p {
    background:rgba(245,245,245,1);
    padding: 0 .1rem;
    border-radius:.03rem;
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
    line-height: .2rem;
    text-align: center;
    margin-right: .1rem;
    margin-bottom: .1rem;
  }

  .xuanze {
    width: 100%;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    box-shadow:0 .02rem .04rem 0 rgba(0, 0, 0, 0.08);
    border-radius:.05rem;
    margin-bottom: .1rem;
    padding: 0 .1rem;
  }
  .xz {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
    box-sizing: border-box;
  }
  .xz>img:nth-child(1) {
    width: .14rem;
    height: .14rem;
    margin-right: .15rem;
  }
  .xz>img:nth-child(3) {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: 0;
  }
  .xz>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }

  .yugu {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding: 0 .1rem;
    margin-bottom: .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
    background-color: #ffffff;
    justify-content: space-between;
    box-shadow:0 .02rem .04rem 0 rgba(0, 0, 0, 0.08);
    border-radius:.05rem;
  }
  .yugu>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .yugu>p:nth-child(1)>span {
    font-size:.11rem;
    color: #FF6F6F;
  }
  .yugu>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
    margin-right: .2rem;
  }
  .yugu>img {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: .1rem;
  }

  .xiaofei {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .1rem;
    margin-bottom: .1rem;
    display: flex;
    flex-flow: column;
    position: relative;
    background-color: #ffffff;
    box-shadow:0 .02rem .04rem 0 rgba(0, 0, 0, 0.08);
    border-radius:.05rem;
  }
  .xiaofei>div {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .xiaofei>div>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .xftop {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .numbtn {
    width: 50%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .numbtn>p {
    height: 100%;
    width: 30%;
    text-align: center;
    font-size: .15rem;
  }
  .numbtn>p:nth-child(1) {
    border:.01rem solid rgba(210,210,210,1);
    border-radius:.03rem;
    color: #D2D2D2;
  }
  .numbtn>p:nth-child(3) {
    border:.01rem solid #FF7B1A;
    border-radius:.03rem;
    color: #FF7B1A;
  }
  .numbtn>p:nth-child(2) {
    width: 40%;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }

  .xfbot {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: .2rem;
  }
  .xfbot>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .xfbot>img {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: 0;
  }

  .fuwu {
    width: 100%;
    height: .3rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .fuwu>img {
    width: .15rem;
    height: .15rem;
    margin-right: .1rem;
  }
  .fuwu>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .fuwu>p>span {
    color: #FF7B1A;
  }

  footer {
    width: 100%;
    height: .5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 888;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 .1rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .footleft {
    width: 40%;
    height: 100%;
    box-sizing: border-box;
    padding: .05rem 0;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .footleft>p:nth-child(1) {
    font-size:.09rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .footleft>p:nth-child(1)>span {
    font-size: .15rem;
  }
  .footleft>p:nth-child(2) {
    font-size:.09rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF6F6F;
  }
  .buy {
    width:1rem;
    height:.33rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.17rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
    text-align: center;
    line-height: .33rem;
  }
</style>
